<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>分类管理</title>
    <link rel="stylesheet" href="./css/kind.css">
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
</head>
<body>
<form method="post" action="*">
    <input type="button" class="button1" value="新增" src="*" id="add_open">
    输入关键词：<input type="text" name="search" placeholder="分类关键字">
    <input type="submit" value="查询">
    <input type="button" class="button2" value="删除勾选项" src="*">
    <div id="add">
        <div class="add_top">
            <i>添加分类</i>
        </div>
        <input type="text" name="tap" placeholder="新增分类名" id="text">
        <div class="add_bottom">
            <div class="bottom_right">
                <input type="button"value="取消" src="*" id="cancel">
                <input type="button"value="确定" src="*" id="confirm">
            </div>
        </div>
    </div>
</form>
<table border="1" cellspacing="0" align="center" class="con-b">
    <h1>分类列表：</h1>
    <tbody>
    <c:if test="${al.size()!=0}">
        <thead>
        <tr class="row">
            <td><input type="checkbox" id="j_cbAll">全选</td>
            <td>分类编号</td>
            <td>分类名</td>
            <td>删除分类</td>
        </tr>
        </thead>


        <tbody id="j_tb">
<tr>
    <td><input type="checkbox"></td>
    <td class="lf">1</td>
    <td class="lf">a</td>
    <td><a href="">删除</a></td>
</tr>
<tr>
    <td><input type="checkbox"></td>
    <td class="lf">1</td>
    <td class="lf">a</td>
    <td><a href="">删除</a></td>
</tr>
<tr>
    <td><input type="checkbox"></td>
    <td class="lf">1</td>
    <td class="lf">a</td>
    <td><a href="">删除</a></td>
</tr>
</tbody>
<%-- modal.setAttribute("",jojojojosdjas); ajax + json --%>


        <c:forEach items="${al}" var="*">
            <tr>
                <td class="lf">1</td>
                <td class="lf">a</td>
                <td class="lf">删除</td>
            </tr>
        </c:forEach>
    </c:if>
    <c:if test="${al.size()==0}">
        <h2>暂无数据</h2>
    </c:if>
    </tbody>
</table>
<script>
    let btn=document.getElementById('add_open');
    let add=document.getElementById('add');
    let btn_cancel=document.getElementById('cancel');

    btn.onclick=function (){
        add.style.display="block";
    }
    btn_cancel.onclick=function (){
        add.style.display="none";
    }

    // 1. 全选和取消全选做法：  让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
    // 获取元素
    var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮
    var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框
    // 注册事件
    j_cbAll.onclick = function() {
        // this.checked 它可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中
        console.log(this.checked);
        for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].checked = this.checked;
        }
    }
    // 2. 下面复选框需要全部选中， 上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中。
    for (var i = 0; i < j_tbs.length; i++) {
        j_tbs[i].onclick = function() {
            // flag 控制全选按钮是否选中
            var flag = true;
            // 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
            for (var i = 0; i < j_tbs.length; i++) {
                if (!j_tbs[i].checked) {
                    flag = false;
                    break; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了
                }
            }
            j_cbAll.checked = flag;
        }
    }
</script>
</body>
</html>
